/**
 * @module  我的
 * @author xiongsha
 * @date 2020-12-21 21:31:01
 */

import React, { useState, useEffect } from 'react';
import HeaderComponent from '@src/pages/components/Header';
import { Toast, List } from 'antd-mobile';
import request from '@src/utils/request';
import { RouteComponentProps } from 'react-router';
import moment from 'moment';
import './index.less';

const { Item } = List;
interface IItems {
  [prop: string]: any;
}
interface IDetail {
  items?: IItems[];
  [prop: string]: any;
}

const OrderDetail: React.FC<RouteComponentProps> = (props: RouteComponentProps) => {
  const orderId = (props.match.params as any).id;
  const [detail, setDetail] = useState<IDetail>({});
  const getMine = () => {
    request('get', `/api/v1/orders/${orderId}`).then((res) => {
      if (res && res.code === 200) {
        setDetail(res.data);
      }
    });
  };
  useEffect(() => {
    getMine();
  }, []);
  return (
    <div className="order-detail">
      <HeaderComponent text="订单详情" />
      <div className="detail-con">
        <div className="content">
          <img
            className="store-img"
            src={
              detail.items &&
              detail.items[0] &&
              detail.items[0].venue &&
              detail.items[0].venue.image
            }
            alt=""
          />
          <div>
            <p className="store-name">
              {detail.items &&
                detail.items[0] &&
                detail.items[0].venue &&
                detail.items[0].venue.name}
            </p>
            <p className="store-status">
              {detail.closed ? '已关闭' : detail.paid_at ? '已支付' : '未支付'}
            </p>
          </div>
        </div>
      </div>
      <List
        renderHeader={() => `${detail.items && detail.items[0] && detail.items[0].date}`}
        className="my-list"
      >
        {detail.items &&
          detail.items.map((cur) => (
            <Item key={cur.id} extra={`¥${cur.time.price}`}>
              {cur.time.title}
            </Item>
          ))}
      </List>
      <List renderHeader={() => ''} className="my-list">
        <Item extra={`${detail.total_amount}元`}>实付</Item>
        <Item extra={`${detail.no}`}>订单编号</Item>
      </List>
    </div>
  );
};

export default OrderDetail;
